<template>
  <!-- 用来修改的表单项 -->
<div>
        <el-row :gutter="10">
            <el-col :span='6'>
                <changeassemblyEx
                        :drag2='drag2'
                        :data='types'
                        :bigid='bigid'
                        @addcom='addcom'
                        @setcom='setcom'
                        @setdrag='setdrag'
                        @deletecom='deletecom'
                        @additem="additem"
                        @setitem="setitem"
                        @reset='reset'
                       />
            </el-col>
            <el-col :span='12'>
                <Forms
                        ref='forms'
                        :fromData='data'
                        :formsetting='formsetting'
                        :drag1='drag1'
                        :drag2='drag2'
                        :com='com'
                        @setdrag='setdrag'
                        @reset='reset'
                        @setdelcom='setdelcom'
                        @addcom='addcom'
                        @jiaohuan='jiaohuan'
                        @setformcom='setformcom'
                        @setdialogVisible='setdialogVisible'
                        @save='save'
                        @qingkong='qingkong'
                        @downloadvue='downloadvue'
                />
            </el-col>
            <el-col :span="6">
                <AttrFrom
                        :fields='fields'
                        :form='formcom'
                        :formsetting='formsetting'
                        :drag2='drag2'
                        @deletecom='deletecom'
                />
            </el-col>
        </el-row>
        <el-dialog
                title="预览表单"
                v-if='dialogVisible'
                :visible.sync="dialogVisible"
                width="70%"
                :before-close="handleClose">
            <ShowFrom :data='{formsetting:formsetting,forms:data}'/>
        </el-dialog>
    </div>
</template>

<script>
  import Bus from '@/utils/eventBus.js'
  import dow from './dow'
  // import Assembly from './assembly'
  import changeassemblyEx from './changeassemblEx.vue'
  import Forms from './forms'
  import AttrFrom from './attributeform'
  import ShowFrom from './ShowForms'
  import { mapState, } from 'vuex';

  export default{
    name: 'changauditDesign',
            components: {
                changeassemblyEx, Forms, AttrFrom, ShowFrom
            },
            computed: {
               ...mapState(['bigidarr'])
            },
            props: {
                items: {
                    type: Array,
                    default: () => {
                        return []
                    }
                },
                formdata: {
                    type: Object
                },
                fields: {
                    type: Array,
                    default: () => {
                        return [
                            {label: '姓名', value: 'name'},
                            {label: '年龄', value: 'age'},
                        ]
                    }
                }
            },
            watch:{
              items(val){
                this.items=val
                // console.log('拿id',this.items)
                this.getlist()
              },
              formdata(val){
                this.formdata=val
                this.getlist()
                console.log('监听的',this.formdata)

              }
            },

            data() {
                return {
                    // 是否正在拖动左侧的组件 1 没有动  2 已经拖动没有进入中间的界面  3拖动进入中间的页面 4 进入设计页面中的组件
                    drag1: '1',
                    // 是否正在拖动中间的组件 1 没有动  2 已经拖动没有进度其他组件  3 进入其他组件
                    drag2: '1',
                    // 左边 被操作的组件
                    com: {},
                    // 中间正在被拖动的组件的 如果拖动到垃圾桶 将会删除它
                    delcom: {},
                    // 表单列表
                    data: [],
                    // 表单设置
                    formsetting: {
                        labelPosition: 'left',
                        labelwidth: 80,
                        formsize: 'small'
                    },
                    // 中间被点击的组件
                    formcom: {
                        showFrom: [],
                        rules: []
                    },
                    dialogVisible: false,
                    types: [],
                    ids:[],
                    bigid:[],
                    index:null,

                };
            },
             created() {
                console.log('接收的',this.formdata)
              this.getlist()

                this.getxiugai()



            },
            mounted() {
            },

            methods: {


              getxiugai(){
                  Bus.$on('itemid',l=>{
                    this.index=l
                    console.log('接受index啊',this.index)
                    this.setitem(this.index)
                  })
              },
              getlist(){
                // console.log('每项',this.items)
                // 当传入props 值时 设置进入当前的data
                if (this.formdata && this.formdata.formsetting && this.formdata.forms) {
                    this.formsetting = this.formdata.formsetting
                    this.data = this.formdata.forms
                    console.log('接收的data数据',this.formdata)
                }

                this.types=[]

                for (let i = 0; i < this.items.length; i++) {
                    this.types.push(this.items[i].type)
                    let tmpIds = []
                    this.items[i].data.forms.forEach(item => {
                        tmpIds.push(item.key)
                    })
                    this.ids.push(tmpIds)
                }
                 // console.log('type',this.types)
                // console.log('auditDesign2', this.ids)
              },
                // 左边的全部重置 左边的结束拖动时调用
                reset() {
                    this.drag1 = '1'
                    this.drag2 = '1'
                    // 重置中间的横线
                    this.$refs.forms.chonzhihxindex()
                },
                // 预览的 对话框
                setdialogVisible() {
                    this.dialogVisible = true
                },
                handleClose() {
                    this.dialogVisible = false
                },
                // 设置拖动状态
                setdrag(data) {
                    this[data.type] = data.value
                },
                // 设置操作的组件
                setcom(data) {
                    console.log('点击啊啊额eee', data)
                    this.com = data
                },
                setdelcom(data) {
                    this.delcom = data
                },
                setformcom(data) {
                    this.formcom = data

                },

                // 清空
                qingkong() {
                    this.data = []
                    this.formcom = {
                        showFrom: [],
                        rules: []
                    }
                },
                // 删除
                deletecom() {
                console.log('删除',this.delcom)
                console.log('删除项',this.items)

                //   console.log('wate',this.formcom.parent)
                    if (typeof this.formcom.parent === 'undefined') {
                        return
                    }
                    for(var i=0;i<this.items.length;i++){
                        for(var c=0;c<this.items[i].data.forms.length;c++)
                        if(this.delcom.id===this.items[i].data.forms[c].id){
                          this.$store.dispatch('del_item',this.items[i].type.id)

                        }

                      }

                    let index = parseInt(this.formcom.parent)
                    // console.log('auditDesign.deletecom, 2', this.ids)
                    this.ids[index].forEach(val => {
                        // console.log('deletecom****, 3', val)
                        // 如果删除的是 被选中的 则把 选中的也清空
                        if (this.delcom.id === val) {
                            this.formcom = {
                                showFrom: [],
                                rules: []
                            }
                        }
                        this.data = this.data.filter(item => item.id !== val)
                    })
                    // 如果删除的是 被选中的 则把 选中的也清空
                    if (this.delcom.id === this.formcom.id) {
                        this.formcom = {
                            showFrom: [],
                            rules: []
                        }

                    }
                    this.data = this.data.filter(item => item.id !== this.delcom.id)

                },
                // 增加一个组件
                addcom(index = -1) {
                    if (index == -1) {
                        this.data.push(this.com)
                    } else {
                        this.data.splice(index, 0, this.com)
                    }
                },
                // addid(index){
                //   var idarr=[]
                //   idarr.push(this.items[index].type.id)

                //   console.log(idarr)
                // },
                setitem(index) {
                  console.log('接受的啊啊啊啊 啊',index)
                  this.bigid=[]
                  this.bigid.push(this.items[index].type.id)
                  console.log('bigid',this.bigid)
                    // console.log('auditDesign.setitem0', this.items[index].type.id)
                    // console.log('auditDesign.setitem1', this.items[index].data.forms)
                    // console.log('auditDesign.setitem2', this.items[index].data.formsetting)
                    this.formsetting = this.items[index].data.formsetting

                    // let tmpIds = []
                    // this.items[i].data.forms.forEach(item => {
                    //     tmpIds.push(item.key)
                    // })
                    // this.ids.push(tmpIds)

                    // this.data = this.items[index].data.forms
                    console.log(  '内容',this.items)
                    this.items[index].data.forms.forEach(item => {
                        item.parent = index
                        // item.id = item.id
                        // tmpIds.push(item.id)
                        this.data.push(item)
                    })
                    // this.ids.push(tmpIds)
                    // console.log('auditDesign.setitem3', this.data)

                },
                additem(index = -1) {
                    // console.log('auditDesign7', additem)
                },
                // 交换位置
                jiaohuan(start, end) {
                    let arr = this.data
                    // JSON.parse(JSON.stringify(this.data))
                    let aa = arr[start]
                    arr[start] = arr[end]
                    arr[end] = aa
                    this.data = arr
                },
                save() {
                    this.$emit('save', {formsetting: this.formsetting, forms: this.data})
                },
                // 下载
                download(filename, text) {
                    let element = document.createElement('a');
                    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
                    element.setAttribute('download', filename);
                    element.style.display = 'none';
                    document.body.appendChild(element);
                    element.click();
                    document.body.removeChild(element);
                },
                downloadvue() {
                    let filename = 'hello.vue'
                    let text = dow(this.formsetting, this.data)
                    // console.log(text)
                    this.download(filename, text)
                }
            }
        }
    </script>

    <style>
    </style>
